<template>
  <div id="main"
       class="padding-ho">
    <!--  -->
    <div class="imgBox bottom-white-light">
      <div class="img"
           :style="{backgroundImage: `url(${weatherIcon})`}"></div>
      <div class="place msg">
        <span>{{weatherInfo.city}}</span>
        <i class="alifont black">&#xe813;</i>
      </div>
      <div class="msg">
        <span>{{weatherInfo.reporttime}}</span>
        <i class="alifont gray-light">&#xe7dc;</i>
      </div>
    </div>
    <!--  -->
    <div class="weatherBox bottom-white-light">
      <div>
        <span>Now</span>
        <span>+{{weatherInfo.temperature}}</span>
      </div>
      <div>
        <span>Tomorrow</span>
        <span>+{{forecasts[0].casts[1].daytemp}}</span>
      </div>
    </div>
    <!--  -->
    <div class="detailBox">
      <div>
        <span>当前</span>
        <span>{{weatherInfo.weather}}</span>
      </div>
      <div>
        <span>风向</span>
        <span>{{weatherInfo.winddirection}}</span>
      </div>
      <div>
        <span>风力</span>
        <span>{{weatherInfo.windpower}}</span>
      </div>
      <div>
        <span>湿度</span>
        <span>{{weatherInfo.humidity}}%</span>
      </div>
    </div>
    <!--  -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      weatherInfo: {},
      forecasts: {},
      ossUrl: this.$store.state.oss,
    }
  },
  onLoad () {
    this.getWeatherInfo();
  },
  methods: {
    // 获得所在城市天气状态
    async getWeatherInfo () {
      var [error1, res1] = await uni.request({
        url: `${this.$store.state.amapUrl}/v3/weather/weatherInfo?extensions=all&city=440400&key=${this.$store.state.amapWebKey}`
      });
      this.forecasts = res1.data.forecasts
      var [error2, res2] = await uni.request({
        url: `${this.$store.state.amapUrl}/v3/weather/weatherInfo?city=440400&key=${this.$store.state.amapWebKey}`
      });
      this.weatherInfo = res2.data.lives[0]
      console.log('forecasts', this.forecasts);
      console.log('weatherInfo', this.weatherInfo);
    },
  },
  computed: {
    weatherIcon () {
      let url = `${this.ossUrl}/weather/`,
        icon = 'duoyun',
        w = this.weatherInfo.weather;
      if (!w) return url + icon + '-l.png';
      else if (w == '晴') icon = 'day';
      else if (w == '阴') icon = 'yin';
      else if (w == '多云' || w == '少云' || w == '晴间多云') icon = 'duoyun';
      else if (w == '小雨') icon = 'xiaoyu';
      else if (w == '中雨') icon = 'zhongyu';
      else if (w == '大雨') icon = 'dayu';
      else if (w == '暴雨') icon = 'baoyu';
      else if (w == '大暴雨') icon = 'dabaoyu';
      else if (w == '特大暴雨' || w == '极端降雨') icon = 'tedabaoyu';
      else if (w == '阵雨' || w == '强阵雨') icon = 'zhenyu';
      else if (w == '雷阵雨' || w == '强雷阵雨') icon = 'leizhenyu';
      else if (w == '雷阵雨并伴有冰雹') icon = 'leizhenyubanbingbao';
      icon += '-l.png?v1'
      return url + icon;
    },
  },
}
</script>

<style lang="less" scoped>
#main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 20rpx;
  background-color: #303133;
  background-color: #ffffff;
}
span {
  color: #ffffff;
  color: #303133;
}
.imgBox {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40rpx;
  .img,
  img {
    margin: 0 0 10% 0;
    height: 100%;
    flex-grow: 1;
    width: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .msg {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    width: 100%;
    &:last-child {
      span {
        font-size: 26rpx;
        font-weight: bold;
        color: #c0c4cc;
      }
      i {
        transform: translateY(-2rpx);
      }
    }
  }
  .place {
    margin-bottom: 40rpx;
    span {
      font-size: 40rpx;
      font-weight: bolder;
    }
    i {
      color: #ffffff;
      color: #303133;
      margin-left: 20rpx;
      font-size: 30rpx;
      height: 30rpx;
      font-weight: bolder;
      transform: rotate(45deg);
    }
  }
}
.weatherBox {
  flex-shrink: 0;
  padding: 60rpx 0;
  display: flex;
  justify-content: space-between;
  & > div {
    width: 46%;
    display: flex;
    flex-direction: column;
    & > span:first-child {
      font-size: 32rpx;
      font-weight: bold;
    }
    & > span:last-child {
      font-size: 112rpx;
      font-weight: bolder;
      display: flex;
      &::after {
        content: "°";
        align-self: flex-start;
        font-size: 100rpx;
        font-weight: normal;
      }
    }
  }
}
.detailBox {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  padding: 40rpx 0;
  & > div {
    & > span {
      &:first-child {
        margin-right: 6rpx;
      }
      font-size: 30rpx;
      font-weight: bold;
    }
  }
}
</style>